<template>
  <div class="content">
    <div>
      <!-- form表单部分 -->
      <el-card shadow="always">
        <el-row :gutter="8">
          <el-form :inline="true" :model="formData" label-width="80px" size="medium">
            <el-col :span="8">
              <el-col :span="24">
                <el-form-item label="员工账号">
                  <el-input v-model="formData.employeeNumber" placeholder="请输入员工账号" />
                </el-form-item>
              </el-col>
              <el-form-item label="月份" size="medium">
                <el-col :span="21">
                  <el-date-picker v-model="formData.month" type="month" placeholder="请选择月份" style="width: 100%;" value-format="yyyy-MM" />
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-col :span="24">
                <el-form-item label="员工姓名">
                  <el-input v-model="formData.name" placeholder="请输入员工姓名" />
                </el-form-item>
              </el-col>
              <el-form-item label="所属机构">
                <!-- clearable清空下拉框数据图标 -->
                <el-select ref="selectTree" v-model="formData.agencyId" placeholder="请选择机构" clearable @clear="handleClear">
                  <!-- v-if切换显示树形 true显示，false隐藏 -->
                  <el-option hidden :value="formData.agencyId" :label="formData.agencyName" />
                  <el-tree accordion :data="agency" :props="{label:'name'}" :expand-on-click-node="false" :check-on-click-node="true" @node-click="handleNodeClick" />

                </el-select>
                <!-- <el-select v-model="formData.agencyId" placeholder="请选择所属机构"> -->
                <!-- <el-option label="区域一" value="shanghai" /> -->
                <!-- <el-option label="区域二" value="beijing" /> -->
                <!-- </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-col :span="24">
                <el-form-item label="工作模式">
                  <el-select v-model="formData.workPatternId" placeholder="请选择工作模式">
                    <el-option v-for="item in workPattern" :key="item.name" :label="item.name" :value="item.id" />
                    <!-- <el-option label="区域二" value="beijing" /> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-form-item style="padding-left:10px">
                <el-button type="danger" @click="onQuery">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-card>
      <!-- 列表显示部分 -->
      <el-card class="list">
        <el-button type="danger" @click="$router.push('/employee/workArrange-setting')">排班设置</el-button>
        <el-button type="danger" plain @click="bindWord">绑定排班</el-button>
        <el-table
          stripe
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- 多选框 -->
          <el-table-column type="selection" width="55" text-color="#red" />
          <el-table-column
            fixed
            prop="employeeNumber"
            label="员工账号"
            width="150"
          />
          <el-table-column
            fixed
            prop="name"
            label="员工姓名"
            width="120"
          />
          <el-table-column
            fixed
            prop="phone"
            label="员工电话"
            width="120"
          />
          <el-table-column
            fixed
            prop="userType"
            label="员工角色"
            width="120"
            :formatter="formatUser"
          >
            <!-- <template v-slot="scope">
              {{ scope.row.userType }}
            </template> -->
          </el-table-column>
          <el-table-column
            fixed
            prop="workPatternName"
            label="当前工作模式"
            width="120"
          />

          <el-table-column
            v-for="item in 30"
            :key="item"
            :label="item +''"
            width="100"
          >
            <template v-slot="scope">
              <div :class="scope.row.workSchedules[item -1] ? 'work' : 'rest'">
                {{ scope.row.workSchedules[item -1] ? "上" : "休" }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 绑定当前页事件 绑定总页数和页容量 -->
          <el-pagination
            :total="total"
            :page-size="pageConfig.size"
            layout="prev, pager, next"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- 绑定排班的弹框 -->
      <el-dialog title="人工调整" :visible="isShowDialog" width="600px" @close="btnCancel">
        <div class="select">
          <!-- 单选框 -->
          <el-radio v-model="dialogData.radio" label="1" @input="changeWorkPatternType">礼拜制</el-radio>
          <el-radio v-model="dialogData.radio" label="2" @input="changeWorkPatternType">连续制</el-radio>
        </div>
        <el-form :model="formData">
          <el-form-item label="模式名称" label-width="120px" class="workPatternSelect">
            <el-select v-model="dialogData.workPatternId" size="medium" placeholder="请选择工作模式">
              <el-option v-for="item in workPatternDialog" :key="item.name" :label="item.name" :value="item.id" />
            <!-- <el-option label="区域二" value="beijing" /> -->
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="relatedWork">确 定</el-button>
          <el-button @click="isShowDialog = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getWorkSchedulings, getWorkPattern, getBussinessTree, putRelateWork } from '@/api/empolyee/scheduling'
// 引入枚举
import EmployeeEnum from '@/constant/employee'
export default {
  data() {
    return {
      formData: {
        employeeNumber: '', // 员工账号
        name: '', // 员工姓名
        workPatternId: '', // 工作模式id
        month: '', // 月份
        agencyId: '', // 所属机构
        agencyName: '', // 所属机构名称
        page: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      pageConfig: {
        page: 1,
        pageSize: 10
      },
      isShowTree: false,
      workPatternData: [], // 原始排班数据
      workPattern: [], // 用于列表页全部显示的下拉框
      workPatternDialog: [], // 用于绑定排班弹窗下拉框数据
      agency: [],
      isShowDialog: false,
      dialogData: {
        radio: '1',
        workPatternId: ''
      },

      center: true,
      multipleSelection: []
    }
  },
  async created() {
    // 分页渲染页面
    this.loadPage()
    // 获取工作模式下拉框
    this.getWorkPattern()
    // 获取树形结构下拉框
    this.getBussinessTree()
  },

  methods: {

    async loadPage() {
      let { data } = await getWorkSchedulings(this.formData)
      if (data.data) {
        data = data.data
      }
      console.log(data)
      // console.log(162, data.items)
      this.tableData = data.items
      this.total = +data.counts
      console.log(this.total)
    },
    onSubmit() {
      console.log('submit!')
    },
    async currentChange(newPage) {
      this.formData.page = newPage
      await this.loadPage()
    },
    async getWorkPattern() {
      // 发请求获取工作模式
      let { data } = await getWorkPattern()
      // console.log(148, data)
      // console.log(data[1])
      if (data.data) {
        data = data.data
      }
      this.workPattern = [...data[1], ...data[2]]
      this.workPatternData = data // 保留原始数据
      this.workPatternDialog = this.workPatternData[this.dialogData.radio]
      // console.log(153, this.workPattern)
    },
    async   getBussinessTree() {
      let { data } = await getBussinessTree()
      if (data.data) {
        data = data.data
      }
      const tree = JSON.parse(data)
      console.log(188, tree)
      this.agency = tree
    },
    // 机构选中后的操作
    handleNodeClick(data) {
    //   console.log(96, data)可以获取到被点击的部门对象，包含部门名称name
    // 赋值给formdata
      this.formData.agencyId = data.id
      this.formData.agencyName = data.name
      //  调用选择器的失去焦点方法实现隐藏效果
      this.$refs.selectTree.blur()
    },
    // 用户点击清空按钮时触发，清空数据
    handleClear() {
      this.formData.agencyId = ''
      this.formData.agencyName = ''
    },
    // 格式化员工角色
    formatUser(row, col, val) {
      const res = EmployeeEnum.userType.find(item => item.id === val)
      return res ? res.value : '未知'
    },
    // 查询
    onQuery() {
      this.loadPage()
    },
    // 重置
    reset() {
      this.formData = {
        employeeNumber: '', // 员工账号
        name: '', // 员工姓名
        workPatternId: '', // 工作模式id
        month: '', // 月份
        agencyId: '', // 所属机构
        agencyName: '', // 所属机构名称
        page: 1,
        pageSize: 10
      }
      this.loadPage()
    },
    // 绑定排班
    bindWord() {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请选择调整人员')
        return
      }
      this.isShowDialog = true
    },
    btnCancel() {
      this.isShowDialog = false
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 绑定排班
    async relatedWork() {
      const userIdList = []
      this.multipleSelection.forEach((item) => userIdList.push(item.userId))
      const res = await putRelateWork({ userIdList, userType: 1, workPatternId: this.dialogData.workPatternId, workPatternType: this.dialogData.radio })
      console.log(res)
    },
    // 单选框切换
    changeWorkPatternType() {
      // 清空选择框
      this.dialogData.workPatternId = ''
      this.workPatternDialog = this.workPatternData[this.dialogData.radio]
    }

  }
}
</script>

<style  scoped>
.content{
  margin: 20px 20px 20px 20px;

}
.list{
  margin-top: 20px;
}
.rest {
    width: 24px;
    height: 24px;
    background: #eff3f8;
    border: 1px solid #d8dde3;
    border-radius: 50%;
    text-align: center;
    color: #20232a;
    font-size: 13px;
}
.work {
    width: 24px;
    height: 24px;
    background: #ffeeeb;
    border: 1px solid #e15536;
    border-radius: 50%;
    text-align: center;
    color: #e15536;
    font-size: 13px;
}

.select{
  display: flex;
  justify-content:  space-evenly;
  align-items: center;
  margin-top: 15px;
  /* margin-bottom: 15px; */
}
::v-deep .el-dialog__footer {
  /* display: flex;
  justify-self: center; */
  text-align: center;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #d10;
    border-color: #d10;
}
.workPatternSelect{
  margin-top: 30px;
  margin-left:90px ;
}
::v-deep .el-dialog__header {
    padding: 15px 30px 15px;
    background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
}

</style>
